<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="订单号">
              <a-input v-model="queryParam.orderNo" placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="用户名">
              <a-input v-model="queryParam.userName" placeholder="" />
            </a-form-item>
          </a-col>
          <template v-if="advanced">
            <a-col :md="8" :sm="24">
              <a-form-item label="手机号码">
                <a-input v-model="queryParam.userMobile" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="订单状态">
                <a-select placeholder="请选择" v-model="queryParam.orderStatus">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option :value="0">待付款</a-select-option>
                  <a-select-option :value="1">已付款</a-select-option>
                  <a-select-option :value="2">已发货</a-select-option>
                  <a-select-option :value="3">已收货</a-select-option>
                  <a-select-option :value="-1">已撤销</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="下单时间">
                <a-date-picker
                  style="width: 46%"
                  v-model="queryParam.startDate"
                  placeholder="请输入开始时间"
                  @change="onStartDateChange"
                />
                <a-input
                  style="width: 8%; border-left: 0; pointer-events: none; backgroundcolor: #fff"
                  placeholder="~"
                  disabled
                />
                <a-date-picker
                  style="width: 46%"
                  v-model="queryParam.endDate"
                  placeholder="请输入结束时间"
                  @change="onEndDateChange"
                />
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="(!advanced && 8) || 24" :sm="24">
            <span
              class="table-page-search-submitButtons"
              :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
            >
              <a-button type="primary" @click="searchBtn">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
              <a-button
                type="danger"
                @click.stop="exportExcel"
                style="margin-left:8px"
                :loading="exportLoading"
                :disabled="exportLoading"
              >
                <a-icon type="cloud-download" style="color:white"/>
                <span>导出</span>
              </a-button>
              <a @click="toggleAdvanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table
      ref="table"
      :row-key="
        (record) => {
          return record.orderId
        }
      "
      :columns="columns"
      :data-source="data"
      :loading="loading"
      :pagination="pagination"
      @change="onChange"
    >
      <span slot="action" slot-scope="text, record">
        <template>
          <router-link :to="{ name: 'OrderEdit', params: { id: record.orderNo } }">查看/处理</router-link>
        </template>
      </span>
    </a-table>
  </a-card>
</template>

<script>
import moment from 'moment'
const columns = [
  {
    title: 'ID',
    dataIndex: 'orderId'
  },
  {
    title: '订单号',
    dataIndex: 'orderNo'
  },
  {
    title: '订单状态',
    dataIndex: 'orderStatusText'
  },
  {
    title: '商品名称',
    dataIndex: 'goods',
    customRender: (text, record) => {
      return record.goods[0].goodsName
    }
  },
  {
    title: '购买人',
    dataIndex: 'userName'
  },
  {
    title: '学校',
    dataIndex: 'universityName'
  },
  {
    title: '手机号',
    dataIndex: 'phone'
  },
  {
    title: '订单积分',
    dataIndex: 'totalCredit'
  },
  {
    title: '下单时间',
    dataIndex: 'createdAt'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'GoodsOrderList',
  data() {
    return {
      columns,
      loading: false,
      data: [],
      pagination: {
        showQuickJumper: true,
        showSizeChanger: true,
        defaultCurrent: 1, // 默认当前页数
        defaultPageSize: 10, // 默认当前页显示数据的大小
        total: 0, // 总数，必须先有
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        showTotal: (total, range) => {
          return (
            <div>
              共 <span>{total}</span> 条
            </div>
          )
        },
        onShowSizeChange: (current, pageSize) => {
          this.pageSize = pageSize
        }
      },
      queryParam: {
        orderNo: '',
        userName: '',
        userMobile: '',
        orderStatus: '',
        startDate: '',
        endDate: ''
      },
      // 高级搜索 展开/关闭
      advanced: false,
      exportLoading: false // 导出状态
    }
  },
  mounted() {
    // 获取列表
    this.fetch()
  },
  methods: {
    // 开始时间
    onStartDateChange(data, dataString) {
      this.queryParam.startDate = dataString
    },
    // 结束时间
    onEndDateChange(data, dataString) {
      this.queryParam.endDate = dataString
    },
    // 改变每页数量时更新显示
    onChange(pagination) {
      this.pagination.defaultCurrent = pagination.current
      this.pagination.defaultPageSize = pagination.pageSize
      this.fetch()
    },
    // 搜索
    searchBtn() {
      this.pagination.defaultCurrent = 1
      this.fetch()
    },
    // 动态获取列表
    fetch() {
      this.loading = true
      const params = {
        page: this.pagination.defaultCurrent,
        pagesize: this.pagination.defaultPageSize
      }
      this.$common
        .fetchList('/orders/lists', Object.assign(params, this.queryParam))
        .then((data) => {
          this.loading = false
          if (data.code === 200) {
            const result = data.data
            const pagination = { ...this.pagination }
            pagination.total = result.totalInfo.total
            this.data = result.lists
            this.pagination = pagination
          }
        })
        .catch(() => {
          this.$notification.error({
            message: '错误',
            description: '请求信息失败，请重试'
          })
        })
    },
    // 导出
    exportExcel() {
      this.exportLoading = true
      this.$common.exportExcel('orders/export', this.queryParam)
      .then(res => {
        this.exportExcelFile(res)
      })
      .finally(() => {
        this.exportLoading = false
      })
    },
    exportExcelFile (exportData) {
      const link = document.createElement('a')
      // type就是blob的type,是MIME类型的，可以自己查看MIME类型都有哪些
      const blogw = new Blob([exportData], { type: 'application/vnd.ms-excel;charset=utf-8' })
      const objectUrl = window.URL.createObjectURL(blogw) // 创建一个新的url对象
      link.href = objectUrl
      const fileName = `订单 ${moment().format('YYYYMMDDHHmmss')}.xlsx`
      link.download = fileName // 下载的时候自定义的文件名
      link.click()
      window.URL.revokeObjectURL(objectUrl) // 为了更好地性能和内存使用状况，应该在适当的时候释放url.
      this.fetch()
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    resetSearchForm() {
      this.queryParam = {}
    }
  }
}
</script>
